<template>
  <el-backtop
    :right="30"
    :bottom="30"
    :visibility-height="300"
    class="custom-backtop"
  >
    <el-icon><Top /></el-icon>
  </el-backtop>
</template>

<script setup>
import { Top } from '@element-plus/icons-vue';
</script>

<style scoped>
.custom-backtop {
  --el-backtop-bg-color: var(--color-primary);
  --el-backtop-hover-bg-color: var(--color-secondary);
  --el-backtop-text-color: white;
  --el-backtop-hover-text-color: white;
}

.custom-backtop .el-icon {
  font-size: 20px;
}

/* 暗黑模式样式 */
.dark-theme .custom-backtop {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .custom-backtop {
    --el-backtop-size: 36px;
    --el-backtop-right: 20px;
    --el-backtop-bottom: 20px;
  }
}
</style>
